<template>
  <div class="home-asset-view">
    <div class="title">
      <span class="title-first">资产总览</span>
      <span class="title-second">数据截止日期：{{ endDate }}</span>
      <ui-button :loading="loading" :class="{ 'title-third': true, 'title-third-refresh': !loading }" @click="refreshView"></ui-button>
      <ui-button class="only-btn">
        <img class="img-logo" src="@/assets/image/home/arrow.png" alt="" />
      </ui-button>
    </div>

    <asset-view :data="data"></asset-view>
  </div>
</template>

<script>
import dayjs from 'dayjs';
import systemApi from '@/api/system';
import assetView from '@/components/charts/asset-view';
import { mapState } from 'vuex';
export default {
  name: 'ui-asset-view',
  components: { assetView },
  data() {
    return {
      data: [],
      endDate: '2020年12月01日',
      loading: false,
    };
  },
  computed: {
    ...mapState('vxadmin/theme', ['activeName']),
  },
  watch: {
    // 监听主题变化，赋值新的颜色组合
    activeName(newVal) {
      if (newVal) {
        this.refreshView();
      }
    },
  },
  mounted() {
    this.refreshView();
  },
  methods: {
    /**
     * refreshView
     * 请求数据刷新
     */
    async refreshView() {
      this.loading = true;
      await systemApi.assetViewQry({}).then(async (res) => {
        // 模拟接口
        this.data = res.List || [];
        this.endDate = dayjs(new Date()).format('YYYY年MM月DD日');
        this.loading = false;
      });
    },
  },
};
</script>

<style lang="scss">
$indexMainC: #ea6121;
.home-asset-view {
  background: $color-bg-default;
  border-radius: 8px;
  box-shadow: 0px 1px 10px 0px rgba(0, 21, 41, 0.07);
  .title {
    // display: flex;
    // justify-content: space-between;
    margin: 20px 30px 0px 30px;
    .title-first {
      font-size: $s16;
      text-align: left;
      color: $color-text-main;
    }
    .title-second {
      margin-left: 10px;
      font-size: $s12;
      color: #979797;
    }
    .title-third {
      height: 12px;
      width: 12px;
      padding: 0px 20px;
      border: none;
    }
    .title-third-refresh {
      background: url(~@/assets/image/common/refresh.png) no-repeat center;
    }
    .title-img {
      height: 12px;
      float: left;
    }
    .only-btn {
      float: right;
      border: none;
      padding: 5px;
    }
  }
}
</style>
